<!DOCTYPE html>
<html>
<head>



<style>
body {

}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  background-color: white;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: 0px;
 
}



  #sandbox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      z-index: -1;
  }



.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 1px;
  right: 30px;
  font-size: 40px;
}

@media screen and (max-height: 250px) {
  .overlay a {font-size: 10px}
  .overlay .closebtn {
  font-size: 10px;
  top: 0px;
  right: 30px;
  z-index: 5;
  }
}
</style>



<style>

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16em;
  height: 16em;
  transform: translate(-50%,-50%);
}

/* Chart */

.chart { color: #12395F; }

.chart::before,
.chart::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.25em;
  height: 8.125em;
  margin: 0 0 0 -3.25em;
  transform: translate(-50%,-50%);
  background-color: currentColor;
  border-radius: 0.125em;
}

.chart::after {
  width: 8.125em;
  height: 0.25em;
  margin: 3.125em 0 0 -0.125em;
}

.chart i {
  position: absolute;
  bottom: 4.75em;
  left: 9em;
  box-sizing: border-box;
  display: block;
  width: 1.875em;
  height: 0;
  background-color: #F69D88;
  box-shadow: inset 0 0 0 0.25em currentColor;
}

.chart i:first-child {
  animation: chart1 0.999s infinite linear;
}

.chart i:nth-child(2) {
  background-color: #FFDEA3;
  animation: chart2 0.999s 0.333s infinite linear;
}

.chart i:last-child {
  background-color: #85C996;
  animation: chart3 0.999s 0.666s infinite linear;
}

@keyframes chart1 {
  0% { height: 0; }
  10% { height: 5.625em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 5.625em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

@keyframes chart2 {
  0% { height: 0; }
  10% { height: 2.375em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 2.375em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

@keyframes chart3 {
  0% { height: 0; }
  10% { height: 3.5625em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 3.5625em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

</style>

<!-- Shady DOM styles for custom-style --><!-- Shady DOM styles for dom-template --><!-- Shady DOM styles for dom-repeat --><!-- Shady DOM styles for array-selector --><!-- Shady DOM styles for dom-if --><!-- Shady DOM styles for google-consumer-survey --><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
<title>EMIIA.AI   — data processing and visualization</title>
  <style type="text/css">
  #sandbox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: block;
  }
  </style>

  

</head>
<body>



<div class="icon chart" style="cursor:pointer"  onclick="openNav()" alt="ЭМИИА"   title="Preorder">
  <i></i>
  <i></i>
  <i></i>
</div>


 <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="sandbox">
  
  
<iframe  z-index="3" id="sandbox" name="sandbox" allowfullscreen="true" sandbox="allow-scripts allow-modals allow-same-origin allow-popups" src="https://www.appsheet.com/start/ddc54838-9ce9-4a28-8d70-bd82c1309aee#appName=EMIIAAI-2006435&group=%5B%5D&page=fastTable&sort=%5B%7B%22Column%22%3A%22Price%22%2C%22Order%22%3A%22Ascending%22%7D%5D&table=EMIIA.AI&view=EMIIA.AI"></iframe>



</body>


  <script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
</script>


</html>
